<template>
  <div>
    <v-touch class="swiper-div" :swipe-options="{direction: 'horizontal'}">
      <div class="header">
        <div class="header-title subheading-heavy body-content">商品列表</div>
        <div class="search-div div-align-justify-center">
          <div class="search-div-left div-align-justify-center">
            <img class="icon-16" src="@/static/icon/search.png" alt=""/>
          </div>
          <div class="search-div-middle div-align-justify-center">
            <form @submit.prevent="formSubmit" action="javascript:return true">
              <input type="search" v-model="searchValue" placeholder="搜索商品" @keyup.13="onSearch">
            </form>
          </div>
          <div class="search-div-right div-align-justify-center" @click="onScanner">
            <div class="search-div-right-scanner">
              <img class="icon-16" src="@/static/icon/scanner.png" alt=""/>
            </div>
          </div>
        </div>
        <ul class="paragraph-p2-light body-content">
          <li v-if="isAdmin">
            <a :class="tab === productListTypeItemList.toStorage ? 'product-nav-active': '' "
               @click="tabCLick(productListTypeItemList.toStorage)"
            >
              拟入库({{ count.toStorage }})
            </a>
          </li>
          <li>
            <a :class="tab === productListTypeItemList.storage || (!isAdmin && tab === productListTypeItemList.toStorage) ? 'product-nav-active': '' "
               @click="tabCLick(productListTypeItemList.storage)"
            >
              正式入库({{ count.storage }})
            </a>
          </li>
          <li>
            <a :class="tab === productListTypeItemList.removed ? 'product-nav-active': '' "
               @click="tabCLick(productListTypeItemList.removed)"
            >
              已下架({{ count.removed }})
            </a>
          </li>
        </ul>
      </div>
      <div class="margin-top-div-165">
      <div v-if="isAdmin && tab === productListTypeItemList.toStorage">
        <main-empty v-if="count.toStorage === 0"
                    class="padding-top-div-117"
                    :list-code="productListType"
                    :list-item-code="productListTypeItemList.toStorage"
        ></main-empty>
        <template v-if="count.toStorage > 0">
          <div class="product-list-add" @click="$router.push('/product/' + productListTypeItemList.toStorage + '/add')">
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24 18.8056C26.1 18.8056 28.08 19.6247 29.56 21.1031C31.04 22.6014 31.86 24.5792 31.86 26.6569C31.84 28.8345 30.96 30.7923 29.54 32.2107C28.12 33.6292 26.16 34.5082 24 34.5082C21.9 34.5082 19.94 33.6891 18.44 32.2107C16.96 30.7124 16.14 28.7546 16.14 26.6569C16.12 24.5792 16.94 22.6214 18.42 21.1231C19.92 19.6247 21.9 18.8056 24 18.8056ZM24 21.8023C22.7 21.8023 21.48 22.3018 20.54 23.2407C19.62 24.1597 19.12 25.3783 19.14 26.6369V26.6569C19.14 27.9555 19.64 29.1741 20.56 30.0931C21.48 31.0121 22.7 31.5115 24 31.5115C26.68 31.5115 28.84 29.3339 28.86 26.6569C28.86 25.3584 28.36 24.1397 27.44 23.2207C26.52 22.3018 25.3 21.8023 24 21.8023ZM35.22 18.3262C36.22 18.3262 37.04 19.1453 37.04 20.1442C37.04 21.143 36.22 21.9422 35.22 21.9422C34.22 21.9422 33.42 21.143 33.42 20.1442C33.42 19.1453 34.22 18.3262 35.22 18.3262Z" fill="#FBCA04"/>
              <path opacity="0.2" d="M34.88 12.4728L34.68 12.0333C34.14 10.8946 33.52 9.57603 33.14 8.81687C32.22 7.01887 30.64 6.01998 28.7 6H19.28C17.34 6.01998 15.78 7.01887 14.86 8.81687C14.46 9.61598 13.78 11.0544 13.22 12.2331L13.1 12.4728C13.04 12.6326 12.88 12.7125 12.72 12.7125C7.9 12.7125 4 16.6282 4 21.4229V33.2897C4 38.0844 7.9 42 12.72 42H35.28C40.08 42 44 38.0844 44 33.2897V21.4229C44 16.6282 40.08 12.7125 35.28 12.7125C35.1 12.7125 34.96 12.6127 34.88 12.4728Z" fill="#FBCA04"/>
            </svg>
            <span class="paragraph-p2-light">新增拟入库商品</span>
          </div>
          <item-list v-if="count.toStorage"
                     ref="toStorageProductItemList"
                     :key="key.toStorage"
                     :list-code="productListType"
                     :list-item-code="productListTypeItemList.toStorage"
                     v-on:itemNumRefreshEvent = "productListNumInit"
          ></item-list>
        </template>
      </div>
      <div v-if="tab === productListTypeItemList.storage || (!isAdmin && tab === productListTypeItemList.toStorage)">
        <main-empty v-if="count.storage === 0"
                    class="padding-top-div-117"
                    :list-code="productListType"
                    :list-item-code="productListTypeItemList.storage"
        ></main-empty>
        <template v-if="count.storage > 0">
          <div v-if="isAdmin" class="product-list-add" @click="$router.push('/product/' + productListTypeItemList.storage + '/add')">
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24 18.8056C26.1 18.8056 28.08 19.6247 29.56 21.1031C31.04 22.6014 31.86 24.5792 31.86 26.6569C31.84 28.8345 30.96 30.7923 29.54 32.2107C28.12 33.6292 26.16 34.5082 24 34.5082C21.9 34.5082 19.94 33.6891 18.44 32.2107C16.96 30.7124 16.14 28.7546 16.14 26.6569C16.12 24.5792 16.94 22.6214 18.42 21.1231C19.92 19.6247 21.9 18.8056 24 18.8056ZM24 21.8023C22.7 21.8023 21.48 22.3018 20.54 23.2407C19.62 24.1597 19.12 25.3783 19.14 26.6369V26.6569C19.14 27.9555 19.64 29.1741 20.56 30.0931C21.48 31.0121 22.7 31.5115 24 31.5115C26.68 31.5115 28.84 29.3339 28.86 26.6569C28.86 25.3584 28.36 24.1397 27.44 23.2207C26.52 22.3018 25.3 21.8023 24 21.8023ZM35.22 18.3262C36.22 18.3262 37.04 19.1453 37.04 20.1442C37.04 21.143 36.22 21.9422 35.22 21.9422C34.22 21.9422 33.42 21.143 33.42 20.1442C33.42 19.1453 34.22 18.3262 35.22 18.3262Z" fill="#FBCA04"/>
              <path opacity="0.2" d="M34.88 12.4728L34.68 12.0333C34.14 10.8946 33.52 9.57603 33.14 8.81687C32.22 7.01887 30.64 6.01998 28.7 6H19.28C17.34 6.01998 15.78 7.01887 14.86 8.81687C14.46 9.61598 13.78 11.0544 13.22 12.2331L13.1 12.4728C13.04 12.6326 12.88 12.7125 12.72 12.7125C7.9 12.7125 4 16.6282 4 21.4229V33.2897C4 38.0844 7.9 42 12.72 42H35.28C40.08 42 44 38.0844 44 33.2897V21.4229C44 16.6282 40.08 12.7125 35.28 12.7125C35.1 12.7125 34.96 12.6127 34.88 12.4728Z" fill="#FBCA04"/>
            </svg>
            <span class="paragraph-p2-light">新增入库商品</span>
          </div>
          <item-list v-if="count.storage"
                     :key="key.storage"
                     :list-code="productListType"
                     :list-item-code="productListTypeItemList.storage"
                     v-on:itemNumRefreshEvent = "productListNumInit"
          ></item-list>
        </template>
      </div>
      <div v-if="tab === productListTypeItemList.removed">
        <main-empty v-if="count.removed === 0"
                    class="margin-top-div-113"
                    :list-code="productListType"
                    :list-item-code="productListTypeItemList.removed"
        ></main-empty>
        <template v-if="count.removed > 0">
          <item-list v-if="count.removed"
                     :key="key.removed"
                     :list-code="productListType"
                     :list-item-code="productListTypeItemList.removed"
                     v-on:itemNumRefreshEvent = "productListNumInit"
          ></item-list>
        </template>
      </div>
    </div>
    </v-touch>
  </div>
</template>

<script>
import {getProductStatusCount} from '@/request/api'
import { Toast } from "vant";
import MainEmpty from "@/components/MainEmpty";
import ItemList from "@/components/ItemList";

export default {
  name: "ProductViewMain",
  components: {
    MainEmpty,
    ItemList,
  },
  data() {
    return {
      tab: this.$baseJS.getLoginUser().isAdmin ? this.GLOBAL.listItemType.product.toStorage : this.GLOBAL.listItemType.product.storage,
      productListType: this.GLOBAL.listType.product,
      productListTypeItemList: this.GLOBAL.listItemType.product,
      searchValue: "",
      isAdmin: this.$baseJS.getLoginUser().isAdmin,
      key: {
        toStorage: new Date().getTime(),
        storage: new Date().getTime(),
        removed: new Date().getTime(),
      },
      count: {
        toStorage: 0,
        storage: 0,
        removed: 0,
      },
    };
  },
  mounted() {
    const queryTab = this.$route.query.tab
    this.search = new Date().getTime()
    this.productListNumInit()
    if (!this.isAdmin) {
      this.tab = this.GLOBAL.listItemType.product.storage
      this.key.storage = new Date().getTime()
    }
    this.tab = queryTab ? Number(queryTab) : this.GLOBAL.listItemType.product.toStorage
  },
  methods: {
    tabCLick(tab) {
      this.tab = tab
      this.$router.push(this.GLOBAL.pathSetting.product.main + '?tab=' + tab)
      switch (tab) {
        case this.productListTypeItemList.toStorage:
          this.key.toStorage = new Date().getTime()
          break
        case this.productListTypeItemList.storage:
          this.key.storage = new Date().getTime()
          break
        case this.productListTypeItemList.removed:
          this.key.removed = new Date().getTime()
          break
      }
    },
    formSubmit () { return false },
    onSearch() {
      if (this.searchValue && this.searchValue.trim().length > 0) {
        this.$router.push({path: this.GLOBAL.pathSetting.product.search, query: {searchValue: this.searchValue}})
      }
    },
    onScanner() {
      this.$router.push({path: this.GLOBAL.pathSetting.product.scanner, query: {srcUrl: this.GLOBAL.pathSetting.product.main}})
    },
    productListNumInit() {
      getProductStatusCount().then(res => {
        const {State, Msg, Data} = res
        if (State) {
          for (let i = 0; i < Data.length; i++) {
            const {name, count} = Data[i]
            switch (name) {
              case '拟入库':
                this.count.toStorage = count
                break;
              case '正式入库':
                this.count.storage = count
                break;
              case '已下架':
                this.count.removed = count
                break;
            }
          }
        } else { Toast(Msg) }
      })
    },
    onSwiperRight() {
      this.$router.go(-1)
    }
  },
};
</script>
<style scoped>
.search-div {
  width: 343px;
  height: 38px;
  /*padding: 8px 8px 8px 0px;*/
  margin: 0 16px;
  background: #FFF5CC;
  border-radius: 8px;
}
.search-div-left {
  width: 10%;
  height: 38px;
}
.search-div-middle {
  width: 80%;
  padding-right: 8px;
}
.search-div-right {
  width: 10%;
  height: 38px;

}
.search-div-right-scanner {
  padding: 4px 8px;
  border-left: 0.5px solid #b3b3b3;
}
input {
  width: 280px;
  height: 22px;
  border: none;
  background: #FFF5CC;
}

.header {
  height: 160px;
  background: #fcd538;
  position: fixed;
  top: 0px;
  z-index: 3;
}

.header-title {
  height: 24px;
  width: 80px;
  padding-top: 52px;
  padding-bottom: 8px;
}

ul {
  height: 26px;
  background-color: #fcd538;
}

ul li {
  display: inline;
  margin-right: 24px;
  height: 26px;
}

ul a {
  /* Paragraph/P2/light */
  font-family: PingFang SC;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
  /* identical to box height, or 157% */
  color: #424242;
  line-height: 40px;
  text-decoration: none;
}

.product-list-add {
  height: 64px;
  padding: 8px;
  margin: 22px 16px 0 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px dashed #c9a203;
  box-sizing: border-box;
  border-radius: 8px;
}

.product-list-add > img {
  height: 36px;
  width: 40px;
}

.product-list-add > span {
  height: 22px;
  width: 112px;
  padding-left: 8px;
  color: #424242;
  margin: 0 4px;
}
</style>